<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        将class属性为red的元素设置为红色（字体）
        */
        .red{
            color: red;
        }

        /* 
        将class为red的div字体大小设置为30px
        */
        /* 
        交集选择器
        作用：选中同时复合多个条件的元素
        语法：选择器1选择器二选择器n{}
        注意点：
        交集选择器中如果有元素选择器，必须使用元素选择器开头
        */

        div.red{
            font-size: 30px;
        }

        .a.b.c{
            color: blue;
        }
             /* 
            div#box1()
              */
             /* 
              选择器分组（并集选择器）
              作用：同时选择多个选择器对应的元素
              语法：选择器1，选择器2，选择器3，选择器n{}

              #b1,.p1,h1,span,div.red{}
             */

            h1,span{
                color: green;
            }
    </style>
</head>
<body>
  <div class="red">我是div</div>  
  <p class="red">我是p元素</p>
  <div class="red2 a b c">我是div2</div>
  <h1>标题</h1>
  <span>哈哈</span>
</body>
</html>